<template>
  <el-container>
    <el-aside class="aside" :width="isCollapse ? '64px' : '200px'">
      <div class="aside-header"><span class="title-text">{{ isCollapse ? '企' : '企业管理系统' }}</span></div>
      <el-menu
          class="aside-menu"
          :default-active="activeIndex"
          @select="handleSelect"
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="$green-lightest"
          active-background-color="#FFF"
      >
        <el-menu-item index="0">
          <el-icon>
            <House/>
          </el-icon>
          <span class="menu-text">个人主页</span></el-menu-item>
        <el-menu-item index="1">
          <el-icon>
            <GobletSquareFull/>
          </el-icon>
          <span class="menu-text">活动管理</span></el-menu-item>
        <el-menu-item index="2">
          <el-icon>
            <Refrigerator/>
          </el-icon>
          <span class="menu-text">部门管理</span></el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <Location/>
          </el-icon>
          <span class="menu-text">地点管理</span></el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <Key/>
          </el-icon>
          <span class="menu-text">权限管理</span></el-menu-item>
        <el-menu-item index="6">
          <el-icon>
            <Lock/>
          </el-icon>
          <span class="menu-text">身份管理</span></el-menu-item>
        <el-menu-item index="7">
          <el-icon>
            <User/>
          </el-icon>
          <span class="menu-text">用户管理</span></el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <div class="header-left" @click="toggleCollapse">
          <el-icon size="25px" v-if="isCollapse">
            <Expand/>
          </el-icon>
          <el-icon size="25px" v-else>
            <Fold/>
          </el-icon>
          <span style="font-size: 20px;">{{ currentTitle }}</span>
        </div>
        <div class="header-right">
          <div style="cursor: pointer">
            <el-icon size="25" style="margin-right: 30px;padding-top:10px;">
              <Bell/>
            </el-icon>
            <div class="red-dot">{{ 15 }}</div>
          </div>


          <!-- 在 header-right 内部的 el-dropdown 部分 -->
          <el-dropdown class="user-dropdown">
            <div class="user-trigger">
              <span class="user-icon">
                <img src="../../public/user1.png" width="40px" height="40px" alt="头像">
              </span>
              <div class="username">劳大</div>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </el-header>
      <el-main class="main">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {ref} from 'vue';
import {Expand} from "@element-plus/icons-vue";
import router from "@/router/index.js";

const activeIndex = ref('0');
const currentTitle = ref('个人主页');
const isCollapse = ref(false);
const menuRoutes = [
  '/Home/index',     // 个人主页
  '/Home/activity',  // 活动管理
  '/Home/department',// 部门管理
  '/Home/location',  // 地点管理
  '/Home/permission',// 权限管理
  '/Home/position',  // 职位管理
  '/Home/role',      // 角色管理
  '/Home/user'       // 用户管理
];
const handleSelect = (index) => {
  const titles = ['个人主页', '活动管理', '部门管理', '地点管理', '权限管理', '职位管理', '身份管理', '用户管理'];
  currentTitle.value = titles[index];
  router.push(menuRoutes[index]);
};
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};
</script>

<style lang="scss" scoped>
@use '@/assets/styles/common.scss' as *;

.aside {
  height: 100vh !important;
  background-color: $green-lightest;
  transition: width 0.3s ease;

  .aside-header {
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid $green-dark;

    .title-text {
      font-size: 25px;
      font-weight: bolder;
      color: $green-darkest;
      white-space: nowrap;
      transition: all 0.3s ease;
      display: inline-block;
      overflow: hidden;
      max-width: 100%;
    }
  }

  .aside-menu {
    border-right: none;

    .el-menu-item {
      height: 50px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      font-size: 20px;

      .el-icon {
        font-size: 20px;
        margin-right: 12px;
        flex-shrink: 0;
      }

      .menu-text {
        transition: all 0.3s ease;
        opacity: 1;
        display: inline;
      }

      /* 新增：选中项样式 */
      &.is-active {
        background-color: $green-dark !important;
        color: #FFF !important;
      }

      &:hover {
        background-color: $green-dark !important;
        color: #FFF !important;
      }

    }

    &.el-menu--collapse {
      .el-menu-item .menu-text {
        display: inline;
        width: 0;
        opacity: 0;
        margin-left: 0;
        overflow: hidden;
      }
    }
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  border-bottom: 1px solid $green-dark;

  .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;

    .el-icon {
      font-size: 25px;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 10px;

    .red-dot {
      position: absolute;
      top: 30px;
      left: 20px;
      height: 15px;
      border-radius: 15px 15px 15px 0;
      padding: 5px;
      line-height: 15px;
      background-color: red;
      font-size: 15px;
    }



    .user-dropdown {
      .user-trigger {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 0 10px; // 适配间距
        outline: none;

        .user-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 8px;
          img {
            cursor: pointer;
            border-radius: 50%;
          }
        }
        .username {
          font-size: 16px; // 保留数值
          color: #333; // 保留数值
          white-space: nowrap;
        }

      }
    }

  }
}


.el-main {
  --el-main-padding: 0;
  background-color: #F5F7F9;
}
</style>
